<template>
  <div>
    <div class="type_info">请选择报名类型</div>
    <!-- 确认身份按钮 -->
    <ul>
      <li v-for="(item, index) in confirmInfo" :key="index" class="type_item" :class="index === activeConfirmInfo ? 'active' : ''" @click="chooseConfirmInfo(item, index)">
        <van-icon name="passed" class="gl_mr_10" />
        <span>{{ item.name }}</span>
      </li>
    </ul>
    <!-- 步骤按钮 -->
    <van-row :gutter="10" class="bottom_btn_position">
      <van-col span="24" align="center">
        <van-button :disabled="!confirmInfo.length" :loading="nextLoading" type="info" block @click="clickNextStep()">下一步</van-button>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  props: {
    gameInfo: {
      type: Object,
      default () {
        return {};
      }
    }
  },
  data () {
    return {
      nextLoading: false,
      activeConfirmInfo: 0,
      currentUserType: '',
      confirmInfo: [
        {
          name: '个人报名通道',
          code: 'Personal'
        },
        {
          name: '代表队报名通道',
          code: 'Delegation'
        }
      ]
    };
  },
  methods: {
    chooseConfirmInfo (item, index) {
      this.currentUserType = item.code;
      this.activeConfirmInfo = index;
    },
    // 点击执行下一步操作
    clickNextStep () {
      // 是否是收费赛事
      const _gameSetting = this.gameInfo.setting;

      if (!_gameSetting) {
        this.$toast({ type: 'fail', message: `赛事信息不全，无法继续操作！请联系赛事管理员！` });
        return;
      }

      const _allowPersonalEntry = _gameSetting.allowPersonalEntry;
      const _code = this.confirmInfo[this.activeConfirmInfo].code;
      if ((_code === 'Personal' && _allowPersonalEntry) || _code === 'Delegation') {
        this.doNextStep();
      } else {
        this.$toast({ type: 'fail', message: `本次赛事不支持个人报名！` });
      }
    },
    // 执行下一步操作
    doNextStep () {
      this.$emit('onChangeCurrentUserType', this.confirmInfo[this.activeConfirmInfo], this.activeConfirmInfo);
      this.$emit('onNextStep');
    }
  }
};
</script>

<style lang="scss" scoped>
.type_item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  height: 44px;
  padding-left: 30px;
  margin-bottom: 5px;
  font-size: 12px;
  color: #333;
  background: #ffffff;
  border-radius: 5px;
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.10);
}
.type_item.active {
  color: #1890FF;
}

.type_info {
  text-align: left;
  font-size: 12px;
  margin-bottom: 10px;
}
</style>
